var TimeRangePicker = function () {
  var timePickerWidth = 'calc(50% - 7px)';
  var template = /* html */ `
    <div class="time-range-picker" style="display:inline-block">
      <el-time-picker style="width:${timePickerWidth}" v-model="startTime" :placeholder="startPlaceholder" :format="format" :value-format="valueFormat" :size="size"
        :clearable="clearable" :editable="editable" :disabled="disabled" :default-value="defaultValue" :picker-options="{selectableRange:getPickerSelectableRange('start')}"
        @change="pickerChange"></el-time-picker>
      <span>{{separator}}</span>
      <el-time-picker style="width:${timePickerWidth}" v-model="endTime" :placeholder="endPlaceholder" :format="format" :value-format="valueFormat" :size="size"
        :clearable="clearable" :editable="editable" :disabled="disabled" :default-value="startTime?startTime:defaultValue" :picker-options="{selectableRange:getPickerSelectableRange('end')}"
        @change="pickerChange"></el-time-picker>
    </div>
  `;

  return {
    props: {
      value: {
        type: Array,
        required: true
      },
      defaultValue: Number,
      startPlaceholder: String,
      endPlaceholder: String,
      format: {
        type: String,
        default: 'HH:mm:ss'
      },
      valueFormat: {
        type: String,
        default: 'timestamp'
      },
      size: String,
      clearable: {
        type: Boolean,
        default: true
      },
      editable: {
        type: Boolean,
        default: true
      },
      separator: {
        type: String,
        default: '-'
      },
      disabled: {
        type: Boolean,
        default: false
      },
      selectableRange: Array
    },

    watch: {
      value: function () {
        if (this.inputValue !== null) {
          this.inputValue = null;
          return;
        }
        var rangeTime = this.getRangeTime();
        this.startTime = rangeTime.startTime;
        this.endTime = rangeTime.endTime;
      }
    },

    data: function () {
      var rangeTime = this.getRangeTime();
      return {
        startTime: rangeTime.startTime,
        endTime: rangeTime.endTime,
        inputValue: null
      };
    },

    methods: {
      getRangeTime: function () {
        var values = this.value;
        var startTime = values[0],
          endTime = values[1];
        if (startTime === undefined) {
          startTime = null;
        }
        if (endTime === undefined) {
          endTime = null;
        }
        return {
          startTime: startTime,
          endTime: endTime
        };
      },

      getPickerSelectableRange: function (type) {
        var selectableRange = this.selectableRange;
        var selectableStart = selectableRange[0];
        if (SysUtil.isEmpty(selectableStart)) {
          selectableStart = moment().startOf('day').valueOf();
        }
        var selectableEndTime = selectableRange[1];
        if (SysUtil.isEmpty(selectableEndTime)) {
          selectableEndTime = moment().startOf('day').set({
            hour: 23,
            minute: 59,
            second: 59
          }).valueOf();
        }
        var range;
        if (type === 'start') {
          var endTime = this.endTime;
          if (endTime === null) {
            endTime = selectableEndTime;
          }
          range = [
            moment(selectableStart).format('HH:mm:ss'),
            moment(endTime).format('HH:mm:ss')
          ];
        } else {
          var startTime = this.startTime;
          if (startTime === null) {
            startTime = selectableStart;
          }
          range = [
            moment(startTime).format('HH:mm:ss'),
            moment(selectableEndTime).format('HH:mm:ss')
          ];
        }
        return range.join(' - ');
      },

      pickerChange: function () {
        var range = [this.startTime, this.endTime];
        this.inputValue = range;
        this.$emit('input', range);
      }
    },

    template: template
  };
}();